<template>
	<view class="pg-content">
		<uni-segmented-control style="width: 128px;margin-left: 26px;" :current="current" :values="tabItems"
			@clickItem="onClickItem" styleType="text" activeColor="#4cd964"></uni-segmented-control>
		<view class="pg-main">
			<view class="pg-scroll-main">
				<view v-show="current === 0" style="padding-top: 26px;">
					<view class="view-grid">
						<view v-for="(item,i) in voiceList" :key="i" @click="clickItem(item)">
							<view class="img-wrap">
								<image class="item-img" :src="getIcon(item.imageId)"></image>
							</view>
							<text>{{item.name}}</text>
							<image v-show="item.checked" class="img-checked" src="/static/img/ok.png"></image>
						</view>
					</view>
					<view class="wn-sidebar" style="display: none;">
						<slider class="slider1" @change="onChange1" />
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange2" />
						</view>
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange3" />
						</view>
					</view>
				</view>
				<view class="wv-bg" v-show="current === 1" style="padding-top: 26px;">
					<view class="bg-wrap" v-for="(item, i) in bgList" :key="i" @click="clickBg(item)">
						<image class="img-bg" :src="getIcon(item.imageId)"></image>
						<text>{{item.name}}</text>
						<image v-show="item.checked" class="img2-check" src="/static/img/ok.png"></image>
					</view>
					<view class="wn-sidebar" style="display: none;">
						<slider class="slider1" @change="onChange1" />
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange2" />
						</view>
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange3" />
						</view>
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange2" />
						</view>
						<view>
							<image src="../../static/logo.png" mode="aspectFit" />
							<slider @change="onChange3" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '白噪音',
				tabItems: ['全部', '预设背景'],
				voiceList: [],
				bgList: [],
				current: 0
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				uni.showLoading();
				uni.request({
					url: '/api/getWhiteVoiceList',
					success: (res) => {
						if (res.statusCode == 200) {
							this.voiceList = res.data;
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			getBgList() {
				uni.request({
					url: '/api/getWhiteVoiceBgList',
					success: (res) => {
						if (res.statusCode == 200) {
							this.bgList = res.data;
						}
					}
				});
			},
			getIcon(id) {
				return `${window.location.origin}/api/getVoiceIcon?rId=${id}`;
			},
			clickItem(e) {
				uni.showModal({
					title: e.name,
					content: `是否切换${e.name}`,
					success: (res) => {
						if (res.confirm) {
							this.qiehuanVoice(e);
						}
					}
				});
			},
			clickBg(e) {
				uni.showModal({
					title: e.name,
					content: `是否切换${e.name}`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading();
							uni.request({
								url: '/api/setWhiteVoiceBgVideo?tag=' + e.viewTag,
								success: (res) => {
									uni.hideLoading();
									var msg = res.statusCode == 200 ? "设置成功" : "设置失败";
									setTimeout(()=> {
										uni.showToast({title: msg, icon:'none'});
									}, 10);
									if (res.statusCode == 200) {
										this.getBgList();
									}
								}
							});
						}
					}
				});
			},
			qiehuanVoice(e) {
				uni.showLoading();
				uni.request({
					url: '/api/setWhiteVoiceRing?tag=' + e.viewTag,
					success: (res) => {
						var msg = res.statusCode == 200 ? "设置成功" : "设置失败";
						setTimeout(()=> {
							uni.showToast({title: msg, icon:'none'});
						}, 10);
						if (res.statusCode == 200) {
							this.getList();
						} else {
							uni.hideLoading();
						}
					}
				});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					if (this.bgList.length < 1) {
						this.getBgList();
					}
				}
			},
			onChange1(e) {

			},
			onChange2(e) {

			},
			onChange3(e) {

			}
		}
	}
</script>

<style>
	.view-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
		padding: 12rpx 32rpx 32rpx 32rpx;
	}
	.view-grid view{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	 .img-wrap {
	    width: 100%;
	    padding-top: 100%;
		background-color: #eee;
		border-radius: 12px;
		
	  }
	  .img-wrap image {
	  	position: absolute;
	  	top: 0;
	  	left: 0;
	  	width: 100%;
	  	height: 96%;
	  }
	.img-checked {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 66rpx;
		height: 66rpx;
	}
	.wv-bg {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26rpx;
		padding: 26rpx;
	}
	.bg-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #009cea;
		border-radius: 12rpx;
	}
	.img2-check {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 66rpx;
		height: 66rpx;
	}
	.img-bg {
		width: 100%;
		height: 230rpx;
		border-radius: 12rpx 12rpx 0 0;
	}
	.bg-wrap text {
		padding: 8rpx 0;
		color: #fff;
	}

	.wn-sidebar {
		display: flex;
		flex-flow: column;
		gap: 26px;
		padding: 36px 36px 0px 36px;
	}

	.wn-sidebar view {
		display: flex;
		align-items: center;
	}

	.wn-sidebar view {
		display: flex;
		align-items: center;
	}

	.wn-sidebar view slider {
		width: 100%;
	}

	.wn-sidebar image {
		width: 100px;
		height: 26px;
	}

	.slider1 /deep/ .uni-slider-handle-wrapper {
		height: 6px;
	}

	.wn-sidebar view /deep/ .uni-slider-handle-wrapper {
		height: 3px;
	}
</style>